<div class="container-fluid">
  <app-page-title title="Checklists" [breadcrumbItems]="breadCrumbItems"></app-page-title>
  <div class="row">
    <div class="col lg 12">
      <a routerLink="/checklists/view" class="btn text-primary d-sm-inline-block btn-link"> <i
          class="mdi mdi-arrow-left mr-1"></i> go back</a>
    </div>
  </div>
  <ul ngbNav joyrideStep="manageInfo" title="Checklists expert wizard" [stepContent]="manageInfo"
   #nav="ngbNav" [activeId]="1" class="nav-tabs nav-tabs-custom mt-3">

   <li [ngbNavItem]="1">
    <a ngbNavLink joyrideStep="manageReq" title="Checklists requirements" [stepContent]="manageReq">Requirements</a>
    <ng-template ngbNavContent>
      <div class="row mb-3 mt-4">
        <div class="col-lg-12">
          <div class="row mb-3">
            <div class="col-7">
              <p class="card-title">Manage Requirements</p>
            </div>
            <div class="col-5">
              <a routerLink="/checklists/add-requirement"><button type="button" class="btn btn-primary float-right mb-2">Add
                requirement</button></a>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-centered table-nowrap table-hover">
              <thead class="thead-light">
                <tr>
                  <th scope="col">
                    <div class="text-center">Security controls / Security requirements</div>
                  </th>
                  <th scope="col">
                    <div class="text-center">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of checklistData.items">
                  <td style="width: 60%">
                    <div class="mt-2">
                      <h6 class="text-dark">{{item.checklist_items_checklist_id}}
                        {{item.checklist_items_content |slice:0:130}}...</h6>
                    </div>
                  </td>
                  <td style="width: 40%">
                    <ul class="list-inline mb-0 text-center">
                      <li class="list-inline-item">
                        <button type="button" [routerLink]="['/checklists/update-requirement', item.id]"
                          class="btn btn-success btn-sm ml-2">Update</button>
                      </li>
                      <li class="list-inline-item">
                        <button (click)="centerModal(controlDelete)" type="button"
                          class="btn btn-danger btn-sm ml-2">Delete</button>
                      </li>
                    </ul>
                  </td>

                  <!-- Deletion modal-->
                  <ng-template #controlDelete let-modal>
                    <div class="modal-header">
                      <h5 class="modal-title mt-0">Delete Requirement</h5>
                      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close click')">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="form-group">
                          <label for="delete">Type <b class="text-danger">DELETE</b> to delete the Requirement
                            item</label>
                          <input autocomplete="off" [(ngModel)]="delete" type="text" class="form-control" id="delete"
                            name="delete" placeholder="Type DELETE" onfocus="this.placeholder = ''"
                            onblur="this.placeholder = 'Type DELETE'">
                        </div>
                        <button (click)="deleteRequirement(item.id); modal.dismiss('Cross click')"
                          class="btn btn-danger">Delete</button>
                      </form>
                    </div>
                  </ng-template>
                  <!-- END Project Delete Modal -->

                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- end col-->
      </div>
    </ng-template>
  </li>   

    <li [ngbNavItem]="2">
      <a ngbNavLink joyrideStep="manageConfig" title="Checklists config" [stepContent]="manageConfig">Config questionnaire</a>
      <ng-template ngbNavContent>
        <div class="card mt-3 shadow-none">
          <div class="card-body pt-2">
            <form>
              <div class="row text-center">
                <div class="col-xl-12">
                  <div class="form-group mb-2">
                    <label class="float-left">Checklist Questions:</label>
                    <select [(ngModel)]="selectedQuestion" [ngModelOptions]="{standalone: true}" (change)="
                      selectQuestionFromDropDown()" class="form-control check-drop select2-search-disable">
                      <option value="notDefinedValueDorSelect" selected>Select question</option>
                      <option *ngFor="let item of questionData.items" value="{{item.id}}">{{item.question}}</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="card shadow-none mt-3">
          <div class="card-body pt-1">
            <div class="row">
              <div class="col-lg-6 align-items-stretch">
                <div class="card border border-light shadow-none mb-3">
                  <div class="card-header py-2">
                    <p class="card-title text-center text-dark mt-2">Checklist total (of not yet assigned requirements)
                    </p>
                  </div>
                  <div class="card-body">
                    <div *ngFor="let item of checklistData.items">
                      <button *ngIf="item.question_id == null || item.question_id == 0"
                        (click)="addChecklistCorrelation(item.id)" class="btn btn-card bg-light btn-block mb-2">
                        <div class="row">
                          <div class="col-10 text-left">
                            <b>{{item.checklist_items_checklist_id}}</b>
                            <p class="mt-2 mb-1">
                              {{item.checklist_items_content}}
                            </p>
                          </div>
                          <div class="col-2">
                            <i class="fas fa-pencil-alt text-success mr-1 float-right"> Add</i>
                          </div>
                        </div>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end col -->

              <div class="col-lg-6 align-items-stretch">
                <div class="card border shadow-none mb-3">
                  <div class="card-header py-2">
                    <p class="card-title text-center text-dark mt-2">Checklist total (of assigned requirements)
                    </p>
                  </div>
                  <div class="card-body">
                    <div *ngFor="let item of correlationData.items">
                      <button class="btn btn-card btn-block mb-2 bg-light" (click)="removeChecklisCorrelation(item.id)">
                        <div class="row">
                          <div class="col-10 text-left">
                            <b>{{item.checklist_items_checklist_id}}</b>
                            <p class="mt-2 mb-1">
                              {{item.checklist_items_content}}
                            </p>
                          </div>
                          <div class="col-2">
                            <i class="fas fa-trash-alt text-danger mr-1 float-right"> Remove</i>
                          </div>
                        </div>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ng-template>
    </li>



    <li [ngbNavItem]="3">
      <a ngbNavLink joyrideStep="manageQuestions" title="Checklists questions" [stepContent]="manageQuestions">Questions</a>
      <ng-template ngbNavContent>
        <div class="row mb-3 mt-4">
          <div class="col-lg-12">
            <div class="row mb-3">
              <div class="col-7">
                <p class="card-title">Manage questions</p>
              </div>
              <div class="col-5">
                <a routerLink="/checklists/question-create"><button type="button" class="btn btn-primary float-right mb-2">Add
                  Question</button></a>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table table-centered table-nowrap table-hover">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">
                      <div class="text-center">Name question</div>
                    </th>
                    <th scope="col">
                      <div class="text-center">Action</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of questionData.items">
                    <td style="width: 60%">
                      <div class="mt-2">
                        <h6 class="text-dark">{{item.question}}</h6>
                      </div>
                    </td>
                    <td style="width: 40%">
                      <ul class="list-inline mb-0 text-center">
                        <li class="list-inline-item">
                          <a role="button" [routerLink]="['/checklists/question-update', item.id]"
                            class="btn btn-success btn-sm">Update</a>
                        </li>
                        <li class="list-inline-item">
                          <button (click)="centerModal(questionDelete)" type="button"
                            class="btn btn-danger btn-sm ml-2">Delete</button>
                        </li>
                      </ul>
                    </td>

                    <!-- Deletion modal-->
                    <ng-template #questionDelete let-modal>
                      <div class="modal-header">
                        <h5 class="modal-title mt-0">Delete Question</h5>
                        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close click')">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <form>
                          <div class="form-group">
                            <label for="delete">Type <b class="text-danger">DELETE</b> to delete the Question
                              item</label>
                            <input autocomplete="off" [(ngModel)]="delete" type="text" class="form-control" id="delete"
                              name="delete" placeholder="Type DELETE" onfocus="this.placeholder = ''"
                              onblur="this.placeholder = 'Type DELETE'">
                          </div>
                          <button (click)="deleteQuestion(item.id); modal.dismiss('Cross click')"
                            class="btn btn-danger">Delete</button>
                        </form>
                      </div>
                    </ng-template>
                    <!-- END Project Delete Modal -->

                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- end col-->
        </div>
      </ng-template>
    </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="questionarie"></div>
</div>

<ng-template #manageInfo>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you have the functionality to create, manage and modify the SKF Project expert system wizard. 
        Create, manage and modify Checklists and Checklist requirements, Checklist questions and the Checklist logic.</h6>
    </div>
  </div>
</ng-template>

<ng-template #manageConfig>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can select one of the questions you have created and assign these to a Checklist requirement, 
        you can select 1 Checklist requirement per question or you can add multiple Checklist requirements.</h6>
    </div>
  </div>
</ng-template>


<ng-template #manageReq>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can view, create and manage your Checklist requirements. Also you can add more information to 
        the Checklist requirement like correlating it to a Knowledge base item or assign it to a specific question.</h6>
    </div>
  </div>
</ng-template>

<ng-template #manageQuestions>
  <div class="card p-0">
    <div class="card-body text-center px-0 mr-2 ml-2">
      <h6>Here you can view, create and manage your questions that can be used in the Checklist requirements and / or Checklist configuration.</h6>
    </div>
  </div>
</ng-template>